<template>
<div class="body">
  <div class="top-line"><h2 style="margin-left:5%">成果提交</h2></div>
  <div class="tab-container" style="border: 5px solid #eee">
    <!-- <el-button
      class="filter-item"
      style="margin-left: 10px;"
      type="primary"
      icon="el-icon-edit"
      @click="handleCreate"
    >添加</el-button>
    <el-dialog :visible.sync="dialogFormVisible"> -->
      <el-form class="form-result"
        :model="questionForm"
        ref="dataForm"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left:50px;"
        :rules="rules"
      >
        <el-form-item label="成果标题" prop="achname" style="margin-top:2%">
          <el-input type="textarea" :rows="2" v-model="questionForm.achname"></el-input>
        </el-form-item>
        <el-form-item label="成果类别" prop="achtype">
          <el-select
            v-model="questionForm.achtype"
            class="filter-item"
            placeholder="选择类别"
          >
            <el-option
              v-for="item in tabMapOptions1"
              :key="item.key"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="成果来源" prop="achfrom">
          <el-input aria-required="true" v-model="questionForm.achfrom" />
        </el-form-item>
        <el-form-item label="领域类别" prop="achfield">
          <el-select
            v-model="questionForm.achfield"
            class="filter-item"
            placeholder="选择类别"
          >
            <el-option
              v-for="item in tabMapOptions2"
              :key="item.key"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="行业类别" prop="achindu">
          <el-select
            v-model="questionForm.achindu"
            class="filter-item"
            placeholder="选择类别"
          >
            <el-option
              v-for="item in tabMapOptions3"
              :key="item.key"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="价值" prop="achprice">
          <el-input v-model="questionForm.achprice" />
        </el-form-item>
        <!-- <el-form-item label="关键词" prop="achkw">
          <el-input placeholder="多个关键词请用；隔开" v-model="questionForm.achkw" />
        </el-form-item> -->
        <el-form-item label="公开号" prop="achpubno">
          <el-input v-model="questionForm.achpubno" />
        </el-form-item>
        <el-form-item label="法律状态" prop="lawstatus">
          <el-input v-model="questionForm.lawstatus" />
        </el-form-item>
        <el-form-item label="证书编号" prop="certino">
          <el-input v-model="questionForm.certino" />
        </el-form-item>
        <el-form-item label="成果阶段" prop="achphase">
          <el-select
            v-model="questionForm.achphase"
            class="filter-item"
            placeholder="选择阶段"
          >
            <el-option
              v-for="item in tabMapOptions4"
              :key="item.key"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="转化意愿" prop="transinten">
          <el-radio-group v-model="questionForm.transinten" style="margin-right:20%;">
            <el-radio v-for="(radio, index) in subjectList1" :key="index" :label="radio">{{radio}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目成员" prop="promember">
          <el-input  placeholder="请用;隔开" v-model="questionForm.promember" />
        </el-form-item>
        <el-form-item label="主分类号" prop="mainclsno">
          <el-input v-model="questionForm.mainclsno" />
        </el-form-item>
        <el-form-item label="成果说明" prop="achremark">
          <el-input type="textarea" :rows="3" v-model="questionForm.achremark"></el-input>
        </el-form-item>
        <el-form-item label="配套要求" prop="achrelarequire">
          <el-input type="textarea" :rows="3" v-model="questionForm.achrelarequire"></el-input>
        </el-form-item>
        <el-form-item label="归属" prop="achbelongs">
          <el-radio-group v-model="questionForm.achbelongs" style="margin-right:55%;">
            <el-radio v-for="(radio, index) in subjectList2" :key="index" :label="radio">{{radio}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属名称" prop="achown">
          <el-input placeholder="人名或机构名" v-model="questionForm.achown" />
        </el-form-item>
        <el-form-item label="区域中心" prop="achcenter">
          <el-cascader
            class="filter-item"
            size="large"
            :options="options"
            v-model="questionForm.achcenter"
            @change="handleChange"
            :auto-upload="false">
          </el-cascader>
        </el-form-item>
        <el-form-item label="联系地址" prop="achaddress">
          <el-input placeholder="精确到具体地址" v-model="questionForm.achaddress" />
        </el-form-item>
        <el-form-item label="联系人" prop="achperson">
          <el-input v-model="questionForm.achperson" />
        </el-form-item>
        <el-form-item label="联系号码" prop="achcontact">
          <el-input type="number" v-model="questionForm.achcontact" />
        </el-form-item>
        <el-form-item label="联系邮箱" prop="achmail">
          <el-input v-model="questionForm.achmail" />
        </el-form-item>
        <el-form-item label="委托代理" prop="achagent">
          <el-input v-model="questionForm.achagent" />
        </el-form-item>
        <el-form-item label="法人类型" prop="copertype">
          <el-radio-group v-model="questionForm.copertype" style="margin-right:10%;">
            <el-radio v-for="(radio, index) in subjectList3" :key="index" :label="radio">{{radio}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="成果附件" prop="fileList">
            <el-upload
                class="upload-demo"
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :on-change="handleBefore"
                :auto-upload="false">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-bottom:2%">
        <el-button @click="toach">取消</el-button>
        <el-button @click="handleCreate()" type="primary" plain>重置</el-button>
        <el-button type="primary" @click=" createData() ">确定</el-button>
      </div>
    <!-- </el-dialog> -->
  </div>
</div>
</template>
<script>
//调用接口
// import { saveSubject } from "@/api/content";
import { provinceAndCityData } from 'element-china-area-data'
export default {
    name:'Result',
  data() {
    return {
      options: provinceAndCityData,
      selectedOptions: [],
      fileList: [],
      subjectList1: ["愿意", "不愿意", "已转化"],
      subjectList2: ["个人", "机构"],
      subjectList3: ["企业", "机关", "事业单位","社会团体","其他"],
      input: "",
      tabMapOptions1: [
        { label: "专利", key: "302" },
        { label: "软件著作权", key: "303" },
        { label: "登记鉴定成果", key: "304" },
        { label: "科技评价成果", key: "305" },
        { label: "其他技术成果", key: "306" },
        { label: "农业新品种", key: "307" },
        { label: "预期成果", key: "308" },
        { label: "复合成果", key: "309"},
      ],
      tabMapOptions2:[
          {label:'新材料',key:"102"},
          {label:'新能源与节能',key:"103"},
          {label:'农业',key:"104"},
          {label:'资源与环境',key:"105"},
          {label:'先进制造与自动化',key:"106"},
          {label:'高技术服务',key:"107"},
          {label:'生物与新药',key:"108"},
          {label:'其他',key:"109"},
      ],
      tabMapOptions3:[
          {label:'农、林、牧、渔业',key:"202"},
          {label:'采矿业',key:"203"},
          {label:'电力、燃气及水的生产和供应业',key:"204"},
          {label:'制造业',key:"205"},
          {label:'交通运输、仓储和邮政业',key:"206"},
          {label:'信息传输、计算机服务和软件业',key:"207"},
          {label:'批发和零售业',key:"208"},
          {label:'金融业',key:"209"},
          {label:'住宿和餐饮',key:"210"},
          {label:'房地产业',key:"211"},
          {label:'租赁和商务服务业',key:"212"},
          {label:'科学研究、技术服务和地质勘查业',key:"213"},
          {label:'水利、环境和公共设施管理业',key:"214"},
          {label:'居民服务和其他服务业',key:"215"},
          {label:'教育',key:"216"},
          {label:'卫生、社会保障和社会福利业',key:"217"},
          {label:'文化、体育和娱乐业',key:"218"},
          {label:'公共管理和社会组织',key:"219"},
          {label:'国际组织',key:"220"},
          {label:'其他',key:"221"},
      ],
      tabMapOptions4:[
          {label:"种子期",key:"402"},
          {label:"初创期",key:"403"},
          {label:"成长期",key:"404"},
          {label:"成熟期",key:"405"},
          {label:"小试",key:"406"},
          {label:"中试",key:"407"},
          {label:"生试",key:"408"},
      ],

      questionForm: {
        achname:"",//产品名字
        achtype:"",//产品类型
        achfrom:"",//产品来源
        achprice:"",//产品价格
        achindu: "",//产品行业
        achfield:"",//产品领域
        achkw:"",//关键词
        achpubno:"",//公开号
        lawstatus:"",//法律信息
        certino:"",//证书编号
        achphase:"",//产品阶段
        transinten:"",//转化意愿
        promember:"",//项目成员
        mainclsno:"",//主分类号
        achremark:"",//成果说明
        achrelarequire:"",//配套要求
        achbelongs:"",//归属
        achown:"",//所属名称
        achcenter:"",//区域中心
        achaddress:"",//联系地址
        achperson:"",//联系人
        achcontact:"",//联系号码
        achmail:"",//联系邮箱
        achagent:"",//委托代理
        copertype:"",//法人类型
        fileList:"",//附件
      },
      dialogFormVisible: false,
      rules: {
        achname:[
          { required: true, message: "成果名字不能为空", trigger: "blur" }
          ],
        achtype: [
          { required: true, message: "需要选择类型", trigger: "change" }
          ],
        achfield: [
          { required: true, message: "请选择领域", trigger: "change" }
        ],
        achindu: [
          { required: true, message: "请选择行业", trigger: "change" }
        ],
        achfrom:[
          { required: true, message: "用户名不能为空", trigger: "blur" }
          ],
        lawstatus: [
          { required: true, message: "法律状态不能为空", trigger: "blur" }
          ],
        certino: [
          { required: true, message: "编号不能为空", trigger: "blur" }
        ],
        achphase: [
          { required: true, message: "阶段不能为空", trigger: "blur" }
        ],
        promember: [
          { required: true, message: "项目成员不能为空", trigger: "blur" }
          ],
        mainclsno: [
          { required: true, message: "主分类号不能为空", trigger: "blur" }
        ],
        achremark: [
          { required: true, message: "说明不能为空", trigger: "blur" }
        ],
        achrelarequire: [
          { required: true, message: "要求不能为空", trigger: "blur" }
        ],
        achbelongs:[
          { required: true, message: "所属不能为空", trigger: "change" }
          ],
        achown: [
          { required: true, message: "所属名称不能为空", trigger: "blur" }
          ],
        achcenter: [
          { required: true, message: "区域中心不能为空", trigger: "change" }
        ],
        achaddress: [
          { required: true, message: "联系地址不能为空", trigger: "blur" }
        ],
        achperson:[
          { required: true, message: "联系人不能为空", trigger: "blur" }
          ],
        achcontact: [
          { required: true, message: "联系号码不能为空", trigger: "blur" }
          ],
        achmail: [
          { required: true, message: "联系邮箱不能为空", trigger: "blur" }
        ],
        copertype: [
          { required: true, message: "法人类型不能为空", trigger: "change" }
        ],
        fileList: [
          { required: true, message: "附件不能空提交", trigger: "blur" }
        ],
      },
    };
  },
  methods: {
    toach(){
      this.$router.push({path:"/SandTAchievements"})
    },
    handleChange (value) {
        console.log(value)
      },
    handleCreate() {
      this.questionForm = {
        achname:"",
        achtype:"",
        achfrom:"",
        achprice:"",
        achindu:"",
        achfield:"",
        achpubno:"",
        lawstatus:"",
        certino:"",
        achphase:"",
        transinten:"",
        promember:"",
        mainclsno:"",
        achremark:"",
        achrelarequire:"",
        achbelongs:"",
        achown:"",
        achcenter:"",
        achaddress:"",
        achperson:"",
        achcontact:"",
        achmail:"",
        achagent:"",
        copertype:"",
        fileList:"",

      };
      this.dialogFormVisible = true;
    },
    createData() {
       let params = {
        achname: this.questionForm.achname,
        achtype: this.questionForm.achtype,
        achfrom: this.questionForm.achfrom,
        achprice: this.questionForm.achprice,
        achindu: this.questionForm.achindu,
        achfield: this.questionForm.achfield,
        // achkw: this.questionForm.achkw,
        achpubno: this.questionForm.achpubno,
        lawstatus: this.questionForm.lawstatus,
        certino:this.questionForm.certino,
        achphase: this.questionForm.achphase,
        transinten: this.questionForm.transinten,
        promember: this.questionForm.promember,
        mainclsno: this.questionForm.mainclsno,
        achremark: this.questionForm.achremark,
        achrelarequire: this.questionForm.achrelarequire,
        achbelongs: this.questionForm.achbelongs,
        achown: this.questionForm.achown,
        achcenter: this.questionForm.achcenter,
        achaddress: this.questionForm.achaddress,
        achperson: this.questionForm.achperson,
        achcontact: this.questionForm.achcontact,
        achmail:this.questionForm.achmail,
        achagent: this.questionForm.achagent,
        copertype: this.questionForm.copertype,
        fileList: this.fileList,
        
      }
      console.log(params)

      this.api.postach(params).then(res => {
        console.log(res);

      }).catch(err => {
        this.$message({
          type: "info",
          message: err
        })
      })
    },
    handleBefore(file,fileList){
      this.fileList=fileList;
      console.log(file,fileList);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
  },
};
</script>
<style scoped>
.body{
    background-color: rgb(243, 245, 245);
  }
.top-line{
  padding-top:1% ;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 3px solid skyblue;
  width:900px;
  text-align: left;
}
.tab-container {
  background-color: rgb(252, 252, 252);
    width: 600px;
    margin-top: 2%;
    padding-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
}
.filter-item{
    width: 100%;
}

</style>